<template>
  <div>
    <a-modal v-model:visible="visible" :width="600" title="新增条款模板" :bodyStyle="bodyStyle" @cancel="cacelModel"  @ok="handleOk">
      <a-form :model="formState" ref="caseForm" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="24">
            <div class="form-item-border">
              <a-form-item label="条款分类" name="clauseType">
                <a-select :bordered="false"
                          v-model:value="selectTxt"
                          show-search
                          :show-arrow="false"
                          :not-found-content="null"
                          :field-names="{ label: 'clauseType', value: 'clauseType'}"
                          :filter-option="filterOption"
                          :options="allMainData"
                          @search="handleSearch"
                          @blur="handleBlur"
                          @change="handleChange"
                          @select="handleSelect"
                          placeholder="请选择条款分类"
                />
              </a-form-item>
            </div>
            <div class="form-item-border" :style="{height: '70%'}">
              <a-form-item label="条款内容" name="clauseContent">
                <a-textarea :bordered="false" :autoSize="{minRows: 4, maxRows: 10}"  v-model:value="formState.clauseContent"  :row="6" placeholder="请输入条款内容"/>
              </a-form-item>
            </div>
          </a-col>
        </a-row>
      </a-form>
      <template #footer>
        <div class="from-btn-right">
          <a-button key="back" class="border-btn" @click="cacelModel">取消</a-button>
          <a-button key="submit" @click="handleOk" :loading="confirmLoading" class="search-btn1">保存</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import {defineEmits, defineProps, getCurrentInstance, onMounted, ref, watch} from "vue";
import {message} from "ant-design-vue";
const { proxy  } = getCurrentInstance()
const visible = ref(false);
const bodyStyle = ref({})
const allMainData = ref([])
const dataId = ref('')
const isSubmit = ref(false)
const emit = defineEmits(['saveMemForm'])
const props = defineProps({
  templeId: {
    type: Object,
    required: true
  }
})
const labelCol = ref(
    {
      style: {
        width: '80px'
      },
    },
)

const wrapperCol = ref({
  span: 20
})
const formState = ref({
  templateId: '',
  clauseType: undefined,
  clauseContent: ''
})
watch(() => props.templeId, (newVal) => {
  console.log('数据更新了模板数据信息', newVal)
  dataId.value = newVal.toString()
},{
  deep: true
})
const caseForm = ref()
const showModal = () => {
  visible.value = true
  dataId.value = props.templeId.toString()
  selectTxt.value = undefined
  getAll()
  console.log('formAdd', dataId.value)
};
const cacelModel = () =>{
  visible.value = false
  isSubmit.value = false
  caseForm.value.resetFields()
}
const confirmLoading = ref(false)
const handleOk = () => {
  if (allMainData.value.length > 0) {
    for (let item of allMainData.value) {
      if (item.id === selectTxt.value) {
        searchTxt.value = item.clauseType
        formState.value.clauseType = item.clauseType
        console.log('执行这个了', formState.value)
        break
      } else {
        formState.value.clauseType = selectTxt.value
        console.log('执行这个了3444', formState.value)
      }
    }
  } else {
    formState.value.clauseType = selectTxt.value
    console.log('执行这个了3wwww444', formState.value)
  }
  caseForm.value.validateFields().then(() => {
    formState.value.templateId = props.templeId.toString()
    confirmLoading.value = true
    console.log('上传的formData', formState);
    proxy.$api.postTemplateClauseTypes(formState.value).then(res => {
      if (res.resultCode === 0) {
        visible.value = false;
        isSubmit.value = true
        confirmLoading.value = false
        emit('saveMemForm', isSubmit.value)
        message.success('新增条款成功')
        caseForm.value.resetFields()
      }
    })
  }).catch(err => {
    console.log('请输入', err)
  })
}
const getAll = () => {
  proxy.$api.getTemplateClauseTypes({id:dataId.value}).then(res => {
    console.log('所有模板类型', res)
    allMainData.value = res.resultObject
  })
}
const handleSearch = (value) => {
  if (value) {
    handleBlur(value)
    handleChange(value)
  }
}
const searchTxt = ref()
const selectTxt = ref()
const handleChange = (value) => {
  console.log('值', value)
  selectTxt.value = value
  if (allMainData.value.length > 0) {
    allMainData.value.map(item => {
      if (item.labelValue === value) {
        searchTxt.value = item.id
        formState.value.templateId = item.id
      } else {
        selectTxt.value = value
      }
    })
  } else {
    selectTxt.value = value
    console.log('值改变流ww量没', selectTxt.value)
  }
}
const handleBlur = (val) => {
  if (val) {
    // formState.value.templateId = val
  }
}
const handleSelect = (value) => {
  selectTxt.value = value
}
/**
 * 搜索标签
 * */
const filterOption = (input, option) => {
  console.log('input', input)
  console.log('option', option)
  if (option['clauseType'].indexOf(input) != -1) {
    return option
  } else {
    selectTxt.value = input
  }
}
onMounted(() => {
  getAll()
})
// eslint-disable-next-line no-undef
defineExpose({
  showModal,
  handleOk
})
</script>

<style lang="scss" scoped>
.form-item-flex {
  display: flex;
  justify-content: space-between;
  .form-item-border {
    margin-right: 4px;
  }
}
.from-btn-right {
  height: 62px;
  line-height: 62px;
  background: #ffffff;
  // box-shadow: 0px -4px 9px 0px rgba(0,0,0,0.09);
}
.dragger-img {
  margin-top: 40%;
  img {
    width: 114px;
    height: 110px;
  }
}
</style>
